
<template>
    <div class="body">
    <div id="app">
    <div class="divLeft">
        <p>用户登录</p>
    </div>
    <div class="divRight">
   
    </div>
    <div class="divCenter">
        <div class="divFrom">
            <from action="#" method="post">
                <table>
                    <tr>
                        <td class="tdLeft">
                            <lable class="" for="username">
                                用户名
                            </lable>
                        </td>
                        <td class="tdRight">
                            <input type="text" v-model="username" id="username" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr>
                        <td class="tdLeft">
                            <label class="" for="password">
                                密码
                            </label>
                        </td>
                        <td class="tdRight">
                            <input type="password" v-model="password" id="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="tdLeft">
                            <label class="" for="checkCode">
                                验证码
                            </label>
                        </td>
                        <td class="tdRight">
                            <input type="text" v-model="checkCode" id="checkCode" placeholder="请输入验证码">
                            <img id="imgCode"src="../img/verify_code.jpg" alt="">
                        </td>
                    </tr>
                    <tr>
                        <td @click="login" id="tdSubmit" colspan="2">
                            <input id="btnSubmit" type="submit" value="登录">
                        </td>
                    </tr>
                </table>
            </from>
        </div>
    </div>
   </div>
</div>
</template>
<script setup>
function login(){
  // alert("正在登录...");
  if(username.value=="admin" && password.value=="123"){
    alert("登陆成功");
  }else{
    alert("用户名或密码错误");
  }
}
</script>
<style scoped>
    .body{
        padding-top:40px;
        background-image:url(../img/login_bg.png);
        background-position:center;
        background-repeat: no-repeat;
    }
    #app{
        /* border:1px solid red; */
        width:900px;
        height:600px;
        border:5px solid #eee;
        /* 让div水平居中 */
        margin:auto;
        background-color: white;
    }
    .divLeft{
        float:left;
        width:25%;
        padding-top:20px;
        padding-left: 20px;
    }
    .divLeft>p:first-child{
        color: #ffd026;
        font-size: 20px;
    }
    .divLeft>p:last-child{
        color: #a6a6a6;
        font-size: 20px;
        /* font-weight: bold; */
    }
    .divCenter{
        float:left;
        /* 这里减去的值是左右宽度 */
        width:calc(100% - 25% - 25%);
        padding-top: 150px;
    }
    table{
        color:#a6a6a6;
    }
    .tdLeft{
        width: 150px;
        height: 45px;
        text-align: right;
        padding-right: 45px;
    }
    .divRight{
        float:right;
        width:25%;
        padding-top: 20px;
        padding-right: 20px;
    }
    .divRight>p{
        font-size: 15px;
        color: #a6a6a6;
        text-align: right;
    }
    .divRight p a{
        color: pink;
    }
    /* 单独设置验证码图片 */
    #imgCode{
        height:32px;
        /* 垂直居中 */
        vertical-align: middle;
    }
    /* 表单中放置提交按钮的td */
    #tdSubmit{
        text-align: center;
    }
    #btnSubmit{
        width: 115px;
        height: 30px;
        background-color: #ffd026;
        border: 0px ;
        color: #a6a6a6;
        border-radius: 5px;
    }
    #username,#password,#checkCode{
        width: 251px;
        height: 32px;
        border: 1px solid #a6a6a6;
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkCode{
        width: 110px;
    }
</style>